import {
  FolderOpenFilled,
  HomeFilled,
  MessageFilled,
  TagsFilled,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Layout, Menu } from "antd";
import React, { useState } from "react";
import { history, Outlet } from "umi";
type MenuItem = Required<MenuProps>["items"][number];

const items: MenuItem[] = [
  {
    label: "首页",
    key: "home",
    icon: <HomeFilled />,
  },
  {
    label: "归档",
    key: "archives",
    icon: <FolderOpenFilled />,
  },
  {
    label: "标签",
    key: "tags",
    icon: <TagsFilled />,
  },
  {
    label: "留言板",
    key: "message",
    icon: <MessageFilled />,
  },
];

const { Header, Footer, Sider, Content } = Layout;

const headerStyle: React.CSSProperties = {
  textAlign: "center",
  color: "#fff",
  height: 64,
  paddingInline: 48,
  lineHeight: "64px",
  backgroundColor: "#4096ff",
};

const contentStyle: React.CSSProperties = {
  textAlign: "center",
  minHeight: 120,
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#0958d9",
};

const siderStyle: React.CSSProperties = {
  textAlign: "center",
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#1677ff",
};

const footerStyle: React.CSSProperties = {
  textAlign: "center",
  color: "#fff",
  backgroundColor: "#4096ff",
};

const layouts = () => {
  const [current, setCurrent] = useState("home");

  const onClick: MenuProps["onClick"] = (e) => {
    history.push(`/${e.key}`);
    console.log(e.key);
    setCurrent(e.key);
  };

  return (
    <>
      <Layout className="h-full">
        <Header className="w-full h-16 bg-white">
          <Menu
            onClick={onClick}
            selectedKeys={[current]}
            mode="horizontal"
            items={items}
          />
        </Header>
        <Content
          className="h-full p-3"
          style={{ minHeight: "calc(100vh - 4rem)" }}
        >
          <Outlet />
        </Content>
        <Footer className="h-8 flex justify-center items-center bg-gray-300">
          Footer
        </Footer>
      </Layout>
    </>
  );
};

export default layouts;
